<template>
    <div class="alert_container">
        <section class="tip_text_container">
            <p class="tip_icon">
                <i class="iconfont icon-tishishuoming"></i>
            </p> 
            <p class="tip_text">
                {{alertText}}
            </p>
            <p class="tip_confirm" @click="closeTip">确认</p>
        </section>
    </div>
</template>
<script> 
export default {
  props: ["alertText"],
  methods: {
    closeTip() {
      this.$emit("closeTip");
    }
  }
};
</script>

<style>
.alert_container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
}
.tip_text_container {
  position: absolute;
  top: 50%;
  left: 38%;
  padding-top: 0.6rem;
  margin-top: -6rem;
  margin-left: -6rem;
  width: 18rem;
  animation: tipMove 0.4s;
  background-color: white;
  border: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 1px;
  border-radius: 0.6rem;
}
.tip_icon {
  width: 100%;
  height: 4rem;
}
.tip_icon i {
  font-size: 3rem;
  text-align: center;
  display: block;
  line-height: 4rem;
  color: #f8cb86;
}
.tip_text {
  color: #333;
  text-align: center;
  font-family: Helvetica Neue, Tahoma, Arial;
}
.tip_confirm {
  color: #fff;
  font-weight: bold;
  background-color: #4cd964;
  width: 100%;
  text-align: center;
  line-height: 2.6rem;
  margin-bottom: 0;
  border-bottom-left-radius: 0.6rem;
  border-bottom-right-radius: 0.6rem;
}
</style>
